<template>
  <div class="shopping-cart">
    <cart-header></cart-header>
    <div class="cart-items">
      <cart-item v-for="item in $store.state.cartList" :key="item.id" :item="item"></cart-item>
    </div>
    <cart-footer></cart-footer>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import axios from '@/utils/request'
import CartHeader from '@/components/cart-header.vue'
import CartItem from '@/components/cart-item.vue'
import CartFooter from '@/components/cart-footer.vue'

export default {
  name: 'ShopCountInfo',
  components: {
    CartHeader,
    CartItem,
    CartFooter
  },
  mounted(){
    this.$store.dispatch('getCartList')
  }

}
 /*  setup() {
    const cartItems = ref([])

    // 获取购物车数据
    const fetchCartItems = async () => {
      try {
        const response = await axios.get('/ShopCountInfo')
        cartItems.value = response.data
      } catch (error) {
        console.error('获取购物车数据失败:', error)
      }
    }

    // 更新商品数量
    const updateItemCount = async (id, count) => {
      try {
        const response = await axios.get('/updataItemCount', {
          id,
          count
        })
        // 更新本地数据
        const index = cartItems.value.findIndex(item => item.id === id)
        if (index !== -1) {
          cartItems.value[index] = response.data
        }
      } catch (error) {
        console.error('更新商品数量失败:', error)
      }
    }

    // 计算总价
    const calculateTotal = computed(() => {
      return cartItems.value.reduce((total, item) => {
        return total + item.price * item.count
      }, 0)
    })

    onMounted(() => {
      fetchCartItems()
    })

    return {
      cartItems,
      updateItemCount,
      calculateTotal
    }
  }
} */
</script>

<style scoped>
.shopping-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.cart-items {
  margin: 20px 0;
}
</style> 